<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件模块单元测试（后端自测用）</title>
</head>
<body>
<p>
    <label for="caseID">caseID:</label>
    <input id="caseID">
</p>
<p>
    <label for="casetype">casetype:</label>
    <input id="casetype">
</p>
<p>
    <label for="filetype">filetype:</label>
    <input id="filetype">
</p>
<p>
    <label for="file">上传文件：</label>
    <input type="file" id="file">
</p>
<p>
    <button id="btnSubmit" onclick="submit_clicked()">上传</button>
    <button onclick="cancel_upload()">取消上传</button>
</p>
<p>
    <label for="fileID">fileID:</label>
    <input id="fileID">
    <button id="btnDownload" onclick="download_clicked()">下载</button>
</p>
<p><span id="result"></span>&nbsp;<span id="progress"></span></p>
</body>
<script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>
<script type="text/javascript">
    async function getFormData() {
        let formData = new FormData();
        formData.append("caseID", $("#caseID").val());
        formData.append("casetype", $("#casetype").val());
        formData.append("filetype", $("#filetype").val());
        let file = document.getElementById("file").files[0];
        let token = await getToken();
        formData.append("file", file);
        formData.append("token", token);
        console.log(formData);
        return formData;
    }

    async function getToken() {
        const response = await fetch(
            "http://localhost:8080/login?username=admin&password=admin123",
            {
                method: "POST",
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
            }
        );
        const data = await response.json();
        if (data.success) {
            return data.data.token;
        } else {
            console.log("获取token失败");
            console.log(data);
            return undefined;
        }
    }

    let upload_ajax = null;

    async function submit_clicked() {
        let formData = await getFormData();

        $("#result").text("正在上传……");
        upload_ajax = $.ajax({
            type: 'POST',
            url: "/illManage/AddFile",
            data: formData,
            processData: false,
            contentType: false,
            xhr: function () {
                let xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        let percent = Math.round((e.loaded / e.total) * 100);
                        $('#progress').text(percent + '%');
                    }
                }, false);
                return xhr;
            },
            success: function (data) {
                if (data.success) {
                    $("#result").text("上传成功");
                    $("#progress").text("");
                } else {
                    $("#result").text("上传失败");
                    $("#progress").text("");
                }
                upload_ajax = null;
            }
        });
    }

    function download_clicked() {
        let fileID = $("#fileID").val();
        let url = "/illManage/getFile?id=" + fileID;
        window.open(url, "_blank");
    }

    function cancel_upload() {
        if (upload_ajax) {
            upload_ajax.abort();
            $("#result").text("上传取消");
            $("#progress").text("");
        }
    }
</script>
</html>